<template>
  <li @mouseenter="display='block'" @mouseleave="display='none'" :style="{background:display==='block'? '#ccc':''}">
    <label>
      <input type="checkbox" :checked="done" @change="changeTodoChecked(id)"/>
      <span>{{title}}</span>
    </label>
    <button class="btn btn-danger" :style="{display}" @click="deleteTodo(id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "Item",
  props:['id','title','done','deleteTodo','changeTodoChecked'],
  data(){
    return{
      display:'none'
    }
  }
}
</script>

<style scoped>
@import "@/assets/css/Item.css";
</style>